<template>
  <div class="injected-component">
    <h4>注入组件</h4>
    <div class="component-content">
      <p>注入的主题: {{ theme }}</p>
      <el-button @click="toggleTheme">切换主题</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InjectedComponent',
  
  inject: ['theme', 'toggleTheme']
}
</script>

<style scoped>
.injected-component {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}
</style> 